    export default {
        name: "blogview",
        setup(props) {
            const router = VueRouter.useRouter();
            const route = VueRouter.useRoute();
            const isLoading = ref(true);
            const blog = ref({});
            const currentUrl = ref();
            const id = ref(route.params.id);
            
            onMounted(() => {
                if(id.value) {
                    currentUrl.value = `${window.APP_CONFIG.baseurl}#/subpages/blog/view?id=${id.value}`;
                    loadBlog(id.value);
                }
            });
            
            // 监听 id 的变化
            watch(() => route.params.id, (newId) => {
                if (newId) {
                    loadBlog(newId);
                }
            });

            //查看文章内容
            const loadBlog = async (id) => {
                blog.value = {};
                isLoading.value = true;
                const res = await qtgetblog({id});
                res.Content = arrayToHtml(res.Content);
                blog.value = res;
                document.title = blog.value.Title;
                isLoading.value = false;
            };
            
            //数组转html
			const arrayToHtml = (data) => {
				if(!data || data.length == 0) return '';
				var html = '';
				for (var o in data) {
					var arr = data[o]
					if (arr.value)  {
						arr.value = arr.value.replace(/\n/g, '<br>');
						if (arr.type  == 'text') {
							html = html + '<p style="margin:10px auto;text-indent: 2em;">' + arr.value  + '</p>';
						}
						if (arr.type  == 'img') {
							html = html +
								'<p style="text-align:center;margin:10px auto;"><img style="width:100%;margin:auto;" src="' +
								arr.value  + '"></p>';
						}
						if (arr.type  == 'video') {
							html = html +
								'<p style="text-align:center;margin:10px auto;"><video controls="controls" style="width:300px;margin:auto;" src="' +
								arr.value  + '"></video></p>';
						}
					}
				}
				return html;
			}
            
            //返回列表
            const goBack = async () => {
                router.push({ name: 'bloglist' });
            };

            return {
                id,
                blog,
                loadBlog,
                goBack,
                qtgetblog,
                isLoading,
                currentUrl,
                arrayToHtml
            };
        },
        
        template: `
        <div style="height:100%">
            <div class="content" v-if="!isLoading">
                <div class="blog-detail">
                    <h2 style="display: flex; align-items: center;">
                        <el-icon @click="goBack" style="color: #ff5733;"><List></List></el-icon>&nbsp;
                        <span>{{ blog.Title }}</span>
                    </h2>
                    <div class="meta">作者: {{ blog.Cjz }} | 阅读次数: {{ blog.IsRead }}</div>
                    <div style="line-height:2em;" v-html="blog.Content"></div>
                    
                    <!-- 显示二维码 -->
                    <div class="ewm" v-if="currentUrl">
                        <qrcode-vue :value="currentUrl" :size="200"></qrcode-vue>
                        <div class="footer-text">手机扫码查看文章</div>
                    </div>
            
                    <div style="text-align: center;padding:20px;">
                        <el-button type="info" @click="goBack">返回列表</el-button>
                    </div>
                </div>
            </div>
            <el-backtop :right="30" :bottom="100"></el-backtop>
        </div>
        `
    }